<template>
    <div class="page-container">
        <div class="in-container search-form-box">
            <div class="form">
                <el-form
                    :inline="true"
                    label-suffix="："
                    size="small"
                    label-width="80px"
                    ref="form"
                >
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="实际开航">
                                <el-date-picker
                                    v-model="etd"
                                    type="daterange"
                                    style="width: 100%;"
                                    value-format="YYYY-MM-DD"
                                    range-separator="~"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    size="small"
                                    :unlink-panels="true"
                                    :clearable="false"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="单位名称">
                                <el-select
                                    v-model="query.EntId"
                                    placeholder="请选择"
                                    style="width: 100%;"
                                    filterable
                                    clearable
                                    remote
                                    :remote-method="getBusDetail"
                                    :loading="settlementLoading"
                                >
                                    <el-option
                                        v-for="item in settlementList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                        <span style="float: left;">{{ item.label }}</span>
                                        <span style="float: right;">{{ item.entName }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="业务员">
                                <el-select
                                    v-model="query.SalesId"
                                    placeholder="请选择"
                                    style="width: 100%;"
                                    filterable
                                    clearable
                                    remote
                                    :remote-method="getSalesman"
                                    :loading="salesmanLoading"
                                >
                                    <el-option
                                        v-for="item in salesman"
                                        :value="item.value"
                                        :label="item.label"
                                        :key="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="币种">
                                <el-select
                                    v-model="query.Currency"
                                    placeholder="请选择币种"
                                    style="width: 100%;"
                                    clearable
                                    filterable
                                >
                                    <el-option
                                        v-for="item in current"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="核销状态">
                                <el-select
                                    v-model="query.FeeStatus"
                                    placeholder="请选择核销状态"
                                    style="width: 100%;"
                                    clearable
                                    filterable
                                >
                                    <el-option
                                        v-for="item in WriteOffStatus"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="装箱日期">
                                <el-date-picker
                                    v-model="packDate"
                                    type="daterange"
                                    style="width: 100%;"
                                    value-format="YYYY-MM-DD"
                                    range-separator="~"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    size="small"
                                    :clearable="false"
                                    :unlink-panels="true"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="业务编号">
                                <el-input
                                    v-model="query.BussinessNo"
                                    clearable
                                    placeholder="请输入"
                                    style="width:100%"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="提单号">
                                <el-input
                                    v-model="query.BlNo"
                                    clearable
                                    placeholder="请输入"
                                    style="width:100%"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="箱封号">
                                <el-input
                                    v-model="query.CtnNo"
                                    clearable
                                    placeholder="请输入"
                                    style="width:100%"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="审核状态">
                                <el-select
                                    v-model="query.CheckStatus"
                                    placeholder="请选择审核状态"
                                    style="width: 100%;"
                                    clearable
                                    filterable
                                >
                                    <el-option
                                        :value="-2"
                                        :label="'全部'"
                                    />
                                    <el-option
                                        :value="0"
                                        :label="'未审'"
                                    />
                                    <el-option
                                        :value="1"
                                        :label="'已审'"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div v-show="hidden">
                        <el-row>
                            <el-col :span="5">
                                <el-form-item label="关账日期">
                                    <el-date-picker
                                        type="daterange"
                                        style="width: 100%;"
                                        value-format="YYYY-MM-DD"
                                        range-separator="~"
                                        start-placeholder="开始时间"
                                        end-placeholder="结束时间"
                                        size="small"
                                        :clearable="false"
                                        :disabled="true"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="费用备注">
                                    <el-input
                                        v-model="query.FeeMemo"
                                        clearable
                                        placeholder="请输入"
                                        style="width:100%"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="发票号">
                                    <el-input
                                        v-model="query.InvoiceNo"
                                        clearable
                                        placeholder="请输入"
                                        style="width:100%"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="状态">
                                    <el-select
                                        v-model="query.IsIncome"
                                        placeholder="请选择审核状态"
                                        style="width: 100%;"
                                        clearable
                                        filterable
                                    >
                                        <el-option
                                            :value="-2"
                                            :label="'全部'"
                                        />
                                        <el-option
                                            :value="0"
                                            :label="'未收'"
                                        />
                                        <el-option
                                            :value="1"
                                            :label="'已收'"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="开票状态">
                                    <el-select
                                        v-model="query.InvoiceStatus"
                                        placeholder="请选择审核状态"
                                        style="width: 100%;"
                                        clearable
                                        filterable
                                    >
                                        <el-option
                                            :value="-2"
                                            :label="'全部'"
                                        />
                                        <el-option
                                            :value="0"
                                            :label="'未开票'"
                                        />
                                        <el-option
                                            :value="1"
                                            :label="'已开票'"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
                <el-button
                    type="primary"
                    icon="Search"
                    @click="getTableData"
                    size="small"
                >
                    搜索
                </el-button>
                <el-button
                    type="info"
                    icon="Refresh"
                    @click="reset"
                    size="small"
                >
                    重置
                </el-button>
                <el-button
                    type="primary"
                    icon="More"
                    @click="expend"
                    size="small"
                    class="collapse"
                >
                    {{ hidden ? "折叠" : "展开" }}
                </el-button>
                <el-button
                    icon="Search"
                    type="primary"
                    size="small"
                    @click="() => { $message.error('暂无功能') }"
                >
                    报表
                </el-button>
            </div>
        </div>
        <div class="in-container table-box">
            <div class="btn-box">
                <el-button
                    type="default"
                    icon="RefreshRight"
                    @click="getTableData"
                >
                </el-button>
            </div>
            <AppPageTable
                class="table"
                stripe
                :data="tableData.data"
                :autostyle="'height: calc(100% - 50px) ;'"
                :option="tableData.option"
                @change="getTableData()"
            >
                <el-table-column
                    type="selection"
                    width="80"
                    align="center"
                    fixed="left"
                />
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    label="开航日期"
                >
                    <template #default="scope">
                        {{ scope.row.etd ? $utils.formatDateTime(scope.row.etd, "YYYY-MM-DD") : "" }}
                    </template>
                </el-table-column>
                <el-table-column
                    width="152px"
                    show-overflow-tooltip
                    align="center"
                    label="业务编号"
                    prop="doccode"
                />
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    label="单位名称"
                    prop="entFullname"
                />
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    label="类型"
                >
                    <template #default="scope">
                        {{ scope.row.isIncome == 1 ? "已收" : scope.row.isIncome == 0 ? "未收" : "" }}
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    label="提单号"
                    prop="blNo"
                />
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    label="币种"
                    prop="currency"
                />
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    label="费用类型"
                    prop="feeName"
                />
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    label="数量"
                    prop="digit"
                />
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    label="单价"
                    prop="price"
                />
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    label="金额"
                    prop="totalmoney"
                />
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    label="审核"
                >
                    <template #default="scope">
                        {{ scope.row.checkStatus == 1 ? "已审" : scope.row.checkStatus == 0 ? "未审" : "" }}
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    label="未销金额"
                    prop="unVerificationMoney"
                />
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    label="操作员"
                    prop="userName"
                />
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    label="发票号"
                    prop="invoiceCode"
                />
                <el-table-column
                    show-overflow-tooltip
                    align="center"
                    label="开票日期"
                >
                    <template #default="scope">
                        {{ scope.row.invoiceDate ? $utils.formatDateTime(scope.row.invoiceDate, "YYYY-MM-DD") : "" }}
                    </template>
                </el-table-column>
            </AppPageTable>
        </div>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import AppSearchForm from "@/components/AppSearchForm.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import dayjs from "dayjs";
import AppSearchFormHidden from "@/components/AppSearchFormHidden.vue";
export default defineComponent({
    components: {
        AppSearchForm,
        AppSearchFormHidden,
        AppPageTable,
    },
    data() {
        return {
            query: {
                StartAtd: dayjs().add(-1, "month").format("YYYY-MM-DD"),//起始实际开航日
                EndAtd: dayjs().format("YYYY-MM-DD"),//截止实际开航日
                StartPackTime: "",//开始装箱日
                EndPackTime: "",//结束装箱日
                SalesId: "",//业务员
                BussinessNo: "",//业务编号
                BlNo: "",//提单号
                EntId: "",//单位名称
                Currency: "",//币种
                FeeStatus: -2,//核销状态
                CtnNo: "",//箱封号
                CheckStatus: -2,//审核状态
                FeeMemo: "",//费用备注
                InvoiceNo: "",//发票号
                IsIncome: -2,//收支类型 0 付款 1 收款
                InvoiceStatus: -2,//开票状态 0 未开票 1 已开票
            },
            tableData: {
                data: [],
                option: useTableOption(),
            },
            // 结算对象的数据
            settlementList: [],
            settlementLoading: false,
            // 核销状态
            WriteOffStatus: [
                {
                    label: "全部",
                    value: -2,
                },
                {
                    label: "未销",
                    value: 0
                },
                {
                    label: "已销",
                    value: 1
                },
            ],
            // 业务员
            salesman: [],
            salesmanLoading: false,
            hidden: false,
            // 币种
            current: [
                {
                    label: "RMB|人民币",
                    value: "RMB",
                },
                {
                    label: "HKD|港币",
                    value: "HKD",
                },
                {
                    label: "USD|美元",
                    value: "USD",
                },
                {
                    label: "EUR|欧元",
                    value: "EUR",
                },
            ],
        };
    },
    computed: {
        // 实际开航
        etd: {
            get: function () {
                return [this.query.StartAtd, this.query.EndAtd];
            },
            set: function (val) {
                if (val) {
                    this.query.StartAtd = val[0];
                    this.query.EndAtd = val[1];
                } else {
                    this.query.StartAtd = "";
                    this.query.EndAtd = "";
                };
            },
        },
        // 装箱日期
        packDate: {
            get: function () {
                return [this.query.StartPackTime, this.query.EndPackTime];
            },
            set: function (val) {
                if (val) {
                    this.query.StartPackTime = val[0];
                    this.query.EndPackTime = val[1];
                } else {
                    this.query.StartPackTime = "";
                    this.query.EndPackTime = "";
                };
            },
        },
    },
    methods: {

        // 查询条件展开和收齐
        expend() {
            this.hidden = !this.hidden;
        },

        // 重置
        reset() {
            this.query = {
                StartAtd: dayjs().add(-1, "month").format("YYYY-MM-DD"),//起始实际开航日
                EndAtd: dayjs().format("YYYY-MM-DD"),//截止实际开航日
                StartPackTime: "",//开始装箱日
                EndPackTime: "",//结束装箱日
                SalesId: "",//业务员
                BussinessNo: "",//业务编号
                BlNo: "",//提单号
                EntId: "",//单位名称
                Currency: "",//币种
                FeeStatus: -2,//核销状态
                CtnNo: "",//箱封号
                CheckStatus: -2,//审核状态
                FeeMemo: "",//费用备注
                InvoiceNo: "",//发票号
                IsIncome: -2,//收支类型 0 付款 1 收款
                InvoiceStatus: -2,//开票状态 0 未开票 1 已开票
            };
            this.tableData.option.page = 1;
            this.tableData.option.pageSize = 10;
            this.getTableData();
        },

        // 获取列表数据 
        getTableData() {
            this.tableData.option.loading = true;
            let search = {
                current: this.tableData.option.page,
                pageSize: this.tableData.option.pageSize,
                feeParams: []
            };
            let queryKeysLsit = Object.keys(this.query);
            for (const iterator of queryKeysLsit) {
                if (this.query[iterator] !== "" && this.query[iterator] !== -2) {
                    let keyObject = {
                        key: iterator,
                        value: this.query[iterator],
                    };
                    search.feeParams.push(keyObject);
                };
            };
            this.$http
                .post("/api/reportmanage/getMultiCurrencyFees", search)
                .then((res) => {
                    this.tableData.data = res.data.content;
                    this.tableData.option.total = res.data.totalElements;
                })
                .finally(() => (this.tableData.option.loading = false));
        },

        // 获取业务员
        async getSalesman(val) {
            this.salesmanLoading = true;
            let res = await this.$http.get("/api/user/userCashList", {
                keyword: val
            });
            res.forEach(item => {
                item.label = item.realname;
                item.value = item.id;
            });
            this.salesman = res;
            this.salesmanLoading = false;
        },

        // 获取结算对象的数据
        async getBusDetail(val) {
            this.settlementLoading = true;
            let res = await this.$http.get("/api/buenterprise/queryAll", {
                KeyWords: val,
            });
            res.content.forEach(item => {
                item.label = item.entCode;
                item.value = item.id;
            });
            this.settlementList = res.content;
            this.settlementLoading = false;
        },
    },
    mounted() {
        this.getTableData();
        // this.getSalesman();
        // this.getBusDetail();
    },
});
</script>

<style lang="scss" scoped>
.page-container {
    display: flex;
    flex-direction: column;

    .search-form-box {
        height: auto;
        margin-bottom: 8px;

        :deep(.form .el-form-item) {
            width: 100%;
            margin-right: 0;
        }

        .form {
            :deep(.el-form-item) {
                margin-right: 0;
                margin-bottom: 0;
                width: 100%;

                .el-form-item__label {
                    font-size: 12px;
                }
            }

            :deep(.el-row) {
                margin-bottom: 8px;
                padding-right: 16px;
            }
        }

        .collapse {
            transition: all 0.5s ease;
        }
    }

    .btn-box {
        margin-bottom: 8px;
    }

    .table-box {
        flex: 1;
    }
}
</style>
